<template>
  <a-row :gutter="10">
    <a-col :sm="24" style="margin-bottom: 20px">
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <a-form :form="orderForm" layout="inline">
            <a-row :gutter="24">
              <a-col :md="7" :sm="8">
                <a-form-item label="订单编号" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18 }">
                  <a-input placeholder="请输入订单编号" v-model="orderForm.orderNo"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="10" :sm="8">
                <a-form-item label="提交时间" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18 }">
                  <a-range-picker @change="dateChange" show-time v-model="orderForm.leadsSubmitTime"> </a-range-picker>
                </a-form-item>
              </a-col>
              <a-col :md="7" :sm="8">
                <a-form-item label="线索提交人" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18 }">
                  <a-input placeholder="请输入提交人手机号" v-model="orderForm.leadsSubmitter"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="7" :sm="8">
                <a-form-item label="线索类型" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18 }">
                  <a-cascader
                    :options="typeOptions"
                    change-on-select
                    v-model="typeValue"
                    :field-names="{
                      label: 'name',
                      value: 'id',
                      children: 'childrenList',
                    }"
                    placeholder="请输入线索类型"
                    @change="onTypeChange"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item label="线索编号" :labelCol="{ span: 4 }" :wrapperCol="{ span: 18 }">
                  <a-input placeholder="请输入线索编号" v-model="orderForm.leadsCode"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="9" :sm="8">
                <a-form-item :labelCol="{ span: 4 }" :wrapperCol="{ span: 18, offset: 5 }">
                  <a-button type="primary" @click="search">查询</a-button>
                  <a-button type="primary" @click="reset" style="margin-left: 8px">重置</a-button>
                  <a-button type="primary" style="margin-left: 8px" @click="Export" v-has="'order:export'"
                    >导出</a-button
                  >
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div style="margin-top: 15px">
          <a-table
            style="height: 500px"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="manageList"
            :pagination="ipagination"
            :loading="loading"
            :row-selection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
            }"
            @change="handleTableChange"
          >
            <span slot="action" slot-scope="text, record">
              <a @click="showDrawer(record)">详情</a>
            </span>
          </a-table>
        </div>
      </a-card>
    </a-col>
    <div>
      <a-drawer
        title="详情"
        :closable="false"
        :width="474"
        :visible="visible"
        :body-style="{ paddingBottom: '80px' }"
        @close="onClose"
      >
        <a-form :form="form" layout="vertical" hide-required-mark>
          <a-row :style="pstyle1">
            <a-col>
              <div class="title">
                <div class="title-left">
                  <div class="name">
                    <span>{{ manageDitals.contacts }} {{ manageDitals.contactTel }}</span>
                    <a-tag class="tag" color="orange" style="margin-left: 10px">
                      {{
                        manageDitals.status == 1
                          ? '待分配'
                          : manageDitals.status == 2
                          ? '待确认'
                          : manageDitals.status == 3
                          ? '已分配'
                          : manageDitals.status == 4
                          ? '已跟进'
                          : manageDitals.status == 5
                          ? '已成单'
                          : manageDitals.status == 6
                          ? '已流单'
                          : ''
                      }}</a-tag
                    >
                  </div>
                  <div class="phone">
                    <span></span>
                  </div>
                </div>
                <!-- <div class="title-right">
                  <a-button class="btn" @click="visibleCreateModal = true">分配</a-button>
                </div> -->
              </div>
            </a-col>
            <a-col>
              <div class="order_remraks">备注：{{ manageDitals.evaluate }}</div>
            </a-col>
          </a-row>
          <a-row>
            <a-col style="padding: 40px 20px">
              <a-steps :current="stepsCurrent" size="small">
                <a-step>
                  <span slot="title"></span>
                  <template slot="title"> 首先 </template>
                  <span slot="description">
                    <div v-if="manageDitals.orderStatus == 1">
                      <a-button v-has="'order:one'" @click="orderConfirm">初审确认</a-button>
                    </div>
                    <div v-else>
                      <div>{{ manageDitals.firstReviewUserName }}</div>
                      <div>备注:{{ manageDitals.firstReviewRemarks }}</div>
                      <div v-if="manageDitals.firstReviewImage !== null">
                        <div v-for="(element, index) in manageDitals.firstReviewImage" :key="index">
                          <img
                            :src="getAvatarView(element)"
                            :preview="index"
                            alt=""
                            style="width: 40px; height: 40px; margin: 4px 0; border-radius: 8px"
                          />
                        </div>
                      </div>
                    </div>
                  </span>
                </a-step>
                <a-step>
                  <span slot="title"></span>
                  <template v-if="stepsCurrent == 1" slot="title"> 完成 </template>
                  <span v-if="stepsCurrent == 1" slot="description">
                    <div v-if="manageDitals.orderStatus == 2">
                      <a-button v-has="'order:one'" v-if="userIdentity == '2'" @click="orderConfirm">终审确认</a-button>
                    </div>
                    <div v-if="manageDitals.orderStatus == 3">
                      <div>{{ manageDitals.finalAppealUserName }}</div>
                      <div>备注:{{ manageDitals.finalAppealRemarks }}</div>
                      <div v-if="manageDitals.finalAppealImage !== null">
                        <div v-for="(element, index) in manageDitals.finalAppealImage" :key="index">
                          <img
                            :src="getAvatarView(element)"
                            alt=""
                            :preview="index"
                            style="width: 40px; height: 40px; margin: 4px 0; border-radius: 8px"
                          />
                        </div>
                      </div>
                    </div>
                  </span>
                </a-step>
              </a-steps>
            </a-col>
          </a-row>
          <a-row :style="pstyle2">
            <a-col class="flex flex-a-c flex-j-s-b">
              <span class="sapntag data">订单编号</span>
              <div class="data">{{ manageDitals.orderNo }}</div>
            </a-col>
            <a-col class="flex flex-a-c flex-j-s-b">
              <span class="sapntag data">成单时间</span>
              <div class="data">{{ manageDitals.createTime }}</div>
            </a-col>
            <a-col class="flex flex-a-c flex-j-s-b">
              <span class="sapntag data">合同金额</span>
              <div class="data">{{ manageDitals.contractAmount }}</div>
            </a-col>
            <a-col class="flex flex-a-c flex-j-s-b">
              <span class="sapntag data">佣金</span>
              <div class="data">{{ manageDitals.commissionAmount }}</div>
            </a-col>
            <a-col class="flex flex-a-c flex-j-s-b">
              <span class="sapntag data">佣金发放时间</span>
              <div class="data">{{ manageDitals.commissionPaymentTime }}</div>
            </a-col>
            <a-col class="flex flex-a-c flex-j-s-b">
              <span class="sapntag data">佣金发放对象</span>
              <div class="data">{{ manageDitals.leadsSubmitter }}</div>
            </a-col>
          </a-row>

          <a-row :style="pstyle2">
            <a-col class="flex flex-a-c flex-j-s-b">
              <span class="sapntag data">线索类型</span>
              <div class="data">{{ manageDitals.serviceId_dictText }}</div>
            </a-col>
            <a-col class="flex flex-a-c flex-j-s-b">
              <span class="sapntag data">线索编号</span>
              <div class="data">{{ manageDitals.leadsCode }}</div>
            </a-col>
            <a-col class="flex flex-a-c flex-j-s-b">
              <span class="sapntag data">线索提交人</span>
              <div class="data">{{ manageDitals.leadsSubmitter }}</div>
            </a-col>
            <a-col class="flex flex-a-c flex-j-s-b">
              <span class="sapntag data">线索提交时间</span>
              <div class="data">{{ manageDitals.leadsSubmitTime }}</div>
            </a-col>
          </a-row>
        </a-form>
      </a-drawer>
      <a-modal
        title="审核确认"
        destroyOnClose
        :visible="paymentShow"
        okText="确定"
        @ok="handleModalOk"
        @cancel="handleModalCancel"
      >
        <a-form-model :model="model" :rules="rules" ref="ruleForm">
          <a-form-model-item prop="remarks">
            <div class="select-content">
              <div class="select-title">
                <div><span>备注</span> 必填,不超过100个字</div>
              </div>
              <div class="select-input">
                <a-textarea
                  :auto-size="{ minRows: 4, maxRows: 6 }"
                  v-model="model.remarks"
                  placeholder="请输入备注"
                ></a-textarea>
              </div>
            </div>
          </a-form-model-item>
          <a-form-model-item prop="path">
            <div class="select-content">
              <div class="select-title">
                <div v-if="stepsCurrent == 0"><span>附件</span> 附件选填，最多五张，每张大小不超过1m</div>
                <div v-else><span>附件</span> 附件必填，最多五张，每张大小不超过1m</div>
              </div>
              <div class="select-input">
                <!-- <j-image-upload class="avatar-uploader" text="上传" v-model="model.path"></j-image-upload> -->
                <a-upload
                  :headers="headers"
                  :action="uploadAction"
                  list-type="picture-card"
                  :file-list="fileList"
                  @preview="handlePreview"
                  @change="handleChange"
                  :class="[fileList.length > 4 ? 'image-upload-single-over' : '']"
                >
                  <div v-if="fileList.length < 8">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">上传</div>
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
              </div>
            </div>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </a-row>
</template>
<script>
import { getManageList, getManageById, paymentReceipt, JbdOrderXls, jbdOrderReview } from '@/api/orderDedail'
import { queryAll } from '@/api/threadManage'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getFileAccessHttpUrl } from '@/api/manage'

export default {
  name: 'orderManage',
  data() {
    return {
      rules: {
        remarks: [{ required: true, message: '请输入备注', trigger: 'blur' }],
        followPerson: [{ required: true, message: '请选择跟进人', trigger: 'change' }],
      },
      uploadAction: window._CONFIG['domianURL'] + '/sys/common/upload',
      headers: {},
      fileList: [],
      stepsCurrent: 0,
      typeOptions: [], // 线索类型数据
      typeValue: [],
      dataSource: [],
      orderDetail: {},
      previewVisible: false,
      previewImage: '',
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      loading: false,
      selectedRowKeys: [],
      rightcolval: 0,
      pstyle1: {},
      // 抽屉样式1
      pstyle2: {
        fontSize: '15px',
        // borderTop: '1px solid #e8e8e8',
        width: '100%',
        left: 0,
        padding: '20px 24px',
        lineHeight: '30px',
        borderBottom: ' 1px solid #E8E8E8',
      },
      columns: [
        {
          title: '订单编号',
          align: 'center',
          dataIndex: 'orderNo',
        },
        {
          title: '线索编号',
          align: 'center',
          dataIndex: 'leadsCode',
        },
        {
          title: '线索类型',
          align: 'center',
          dataIndex: 'serviceId_dictText',
        },
        {
          title: '线索提交人',
          align: 'center',
          dataIndex: 'leadsSubmitter',
        },
        {
          title: '线索提交时间',
          dataIndex: 'leadsSubmitTime',
          align: 'center',
          sorter: true,
        },
        {
          title: '成单时间',
          dataIndex: 'createTime',
          align: 'center',
          sorter: true,
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      paymentShow: false,
      visible: false,
      form: {},
      orderForm: {
        //查询条件对象
        orderNo: '', // 订单号
        leadsSubmitTime: [], // 线索提交时间
        leadsSubmitter: '', // 线索提交人
        leadsCode: '', // 线索编号
      },
      manageList: [], //订单列表
      manageDitals: {}, //详情
      visibleCreateModal: false,
      allocation: {}, // 分配弹框数据
      model: {},
      threadId: '',
      rolesCode: '',
      userIdentity: '',
    }
  },
  mounted() {
    const token = Vue.ls.get(ACCESS_TOKEN)
    this.headers = { 'X-Access-Token': token }
    this.rolesCode = window.localStorage.getItem('rolesCode')
    this.userIdentity = JSON.parse(window.localStorage.getItem('pro__Login_Userinfo')).value.userIdentity
    this.getList()
    this.getTypeList()
  },
  methods: {
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    Export() {
      const token = JSON.parse(window.localStorage.getItem('pro__Access-Token')).value
      const selections = this.selectedRowKeys.toString()
      window.open(`https://jbd.iminggu.com/jeecg-boot/jbd/jbdOrder/exportXls?selections=${selections}&token=${token}`)
    },
    getAvatarView(avatar) {
      return getFileAccessHttpUrl(avatar)
    },
    handleModalCancel() {
      this.paymentShow = false
      this.$set(this.model, 'threadId', '')
      this.$set(this.model, 'remarks', '')
      this.$set(this.model, 'path', '')
      this.fileList = []
    },
    handleModalOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.stepsCurrent == 1) {
            if (this.fileList.length > 0) {
              const list = []
              this.fileList.forEach((item) => {
                list.push(item.response.message)
              })
              let data = {
                id: this.threadId,
                remarks: this.model.remarks,
                path: list,
              }
              this.getJbdOrderReview(data)
            } else {
              if (this.stepsCurrent == 1) {
                this.$message.error('请最少上传一张附件')
              }
            }
          } else {
            const list = []
            this.fileList.forEach((item) => {
              list.push(item.response.message)
            })
            let data = {
              id: this.threadId,
              remarks: this.model.remarks,
              path: list,
            }
            this.getJbdOrderReview(data)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    async getJbdOrderReview(data) {
      const res = await jbdOrderReview(data)
      if (res.code == 200) {
        this.$message.success(res.result)
        this.getManageByIdObj(data.id)
        this.paymentShow = false
      }
    },
    // 付款回执
    // async getPaymentReceipt(data) {
    //   const res = await paymentReceipt(data)
    //   if (res.code == 200) {
    //     this.$message.success('上传成功')
    //     this.paymentShow = false
    //     this.getManageByIdObj(data.id)
    //     this.getList()
    //   }
    // },
    handleCancel() {
      this.previewVisible = false
    },
    // 订单列表数据
    async getList() {
      const setData = {
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
        orderNo: this.orderForm.orderNo,
        createTime: this.orderForm.leadsSubmitTime[0],
        updateTime: this.orderForm.leadsSubmitTime[1],
        leadsSubmitter: this.orderForm.leadsSubmitter,
        leadsCode: this.orderForm.leadsCode,
        serviceId: this.orderForm.type,
      }
      const res = await getManageList(setData)
      if (res.code == 200) {
        this.manageList = res.result.records
        this.ipagination.total = res.result.total
      }
    },
    // 线索类型
    async getTypeList() {
      const res = await queryAll()
      if (res.code == 200) {
        console.log(res)
        this.typeOptions = res.result
      }
    },
    // 搜索事件
    search() {
      this.getList()
    },
    //重置功能
    reset() {
      this.$set(this.orderForm, 'orderNo', '')
      this.$set(this.orderForm, 'leadsSubmitTime', '')
      this.$set(this.orderForm, 'leadsSubmitter', '')
      this.$set(this.orderForm, 'leadsCode', '')
      this.getList()
    },
    orderConfirm() {
      this.paymentShow = true
      this.threadId = this.orderDetail.id
    },
    //弹窗功能
    async showDrawer(record) {
      this.orderDetail = record
      this.getManageByIdObj(record.id)
    },
    async getManageByIdObj(id) {
      const res = await getManageById({ id: id })
      if (res.code == 200) {
        this.manageDitals = res.result.jbdOrder
        if (this.manageDitals.orderStatus !== 1) {
          this.stepsCurrent = 1
        } else {
          this.stepsCurrent = 0
        }
        this.visible = true
      }
    },
    onTypeChange(value) {
      this.orderForm.type = ''
      this.orderForm.type = value[value.length - 1]
    },
    afterVisibleChange(val) {},
    onClose() {
      this.visible = false
    },
    dateChange(date, dateString) {
      this.orderForm.leadsSubmitTime = dateString
    },
    handleTableChange(e) {
      this.ipagination.current = e.current
      this.ipagination.pageSize = e.pageSize
      this.getList()
    },
    // 预览
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl
      this.previewVisible = true
    },
    handleChange({ fileList }) {
      this.fileList = fileList
    },
  },
}
</script>
<style scoped lang="less">
/** Button按钮间距 */
.ant-btn {
  margin-left: 8px;
}

.col-title {
  display: inline-block;
  width: 120px;
  text-align: right;
  color: #000000;
  margin-right: 20px;
}

/** Button按钮间距 */
.ant-btn {
  margin-left: 8px;
}
.allotDialog-top {
  font-size: 16px;
  border-bottom: 1px solid #eee;
  .allotDialog-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .info-left {
      .name {
        .tag {
          margin-left: 10px;
          font-size: 14px;
          color: rgb(255, 115, 0);
        }
      }
    }
  }
  .allotDialog-remark {
    margin: 10px 0;
  }
}
.select-content {
  margin-top: 20px;
  .select-title {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    div {
      flex: 1;
    }
  }
  .select-input {
    width: 80%;
  }
  .select-btn {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    div {
      flex: 1;
    }
  }
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 60px;
  background: #fafafa;
  .name {
    margin-left: 20px;
  }
}
.col-title {
  display: inline-block;
  width: 120px;
  text-align: right;
  color: #000000;
  margin-right: 20px;
}
/deep/.ant-drawer-body {
  padding: 0;
}
.order_remraks {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #656565;
  padding: 22px 24px;
  border: 1px solid #e8e8e8;
  border-left: none;
  border-right: none;
}
/deep/ .image-upload-single-over .ant-upload-select {
  display: none;
}
</style>
